<template>
  <div :class="titleClass" :style="titleStyle">
    <slot>{{content}}</slot>
  </div>
</template>
<script>
const prefixCls = "vbestui-list-title";
export default {
  name: "BListTitle",
  inject: {
    vbestList: {
      default: {},
    },
  },
  props: {
    content: {
      type: String,
      default: "",
    },
    splitColor: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      prefixCls: prefixCls,
    };
  },
  computed: {
    titleClass() {
      return [
        `${this.prefixCls}`,
        "vbestui-list-item",
        this.isSplit ? "vbestui-list-item-border" : "",
      ];
    },
    titleStyle() {
      return {
        borderColor: this.splitColor || this.getSplitColor,
      };
    },
    getSplitColor() {
      return this.vbestList.splitColor;
    },
    isSplit() {
      return this.vbestList.split;
    },
  },
};
</script>